<template>
	<view class="frame" :style="{'--background-image':'url' +'(' + avatar + ')'}">
		<!-- <image :src="avatar" class="img"></image> -->
		<view class="frame-content flexcumal">
			<image :src="avatar" style="width: 200rpx;height: 200rpx;border-radius: 50%;"></image>
			<view class="name">用户名称</view>
			<view class="text">等待对方接受邀请...</view>
		</view>
		<view class="frame-buttom flexal" style="padding-left: 23rpx;">
			<view class="flexcumal" style="margin: 0rpx 47rpx;" v-if="microphone">
				<!-- <view class="frame-icon flexcen"> -->
				<image src="/static/video/f88d404003adc4cef0bd294e108a8b0.png" style="width: 134rpx;height: 134rpx;"></image>
				<!-- </view> -->
				<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">麦克风</view>
			</view>
			<view class="flexcumal" style="margin: 0rpx 47rpx;" v-else>
				<view class="frame-icon flexcen">
				<image src="/static/video/96807520ac0c78fbe419e3ac0a95443.png" style="width: 40rpx;height: 48rpx;"></image>
				</view>
				<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">麦克风已关</view>
			</view>
			<view class="flexcumal" style="margin: 0rpx 47rpx;">
				<image src="/static/video/a90daeaeaaf3ef48bc0685042f66e00.png" style="width: 134rpx;height: 134rpx;"></image>
				<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">取消</view>
			</view>
			<view class="flexcumal" style="margin: 0rpx 47rpx;" v-if="loudspeaker">
				<!-- <view class="frame-icon flexcen"> -->
				<image src="/static/video/5658eccd08dde2179d0b849ea983f35.png" style="width: 134rpx;height: 134rpx;"></image>
				<!-- </view> -->
				<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">扬声器</view>
			</view>
			<view class="flexcumal" style="margin: 0rpx 47rpx;" v-else>
				<view class="frame-icon flexcen">
				<image src="/static/video/558d096636ee4c3271fa4761c6a24b5.png" style="width: 49rpx;height: 48rpx;"></image>
				</view>
				<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">扬声器已关</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
				microphone:true,
				loudspeaker:true
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	// .bg {
	//         position: fixed;
	//         width: 450px;
	//         height: 253px;
	//         overflow: hidden;
	//       }
	//       .bg-image {
	//         width: 100%;
	//         filter: blur(5px);
	//       }
	//       .bg-image::after {
	//         content: "";
	//         display: block;
	//         background: rgba(0, 0, 0, 0.5);
	//         z-index: 1;
	//       }

	.frame{
		// background: #757678 !important;
		position: relative;
		width: 100%;
		height: 100vh; 								/* Full viewport height */
		overflow: hidden; 						    /* Hide overflow to ensure blur effect stays within bounds */
		
	}
	.frame::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-image: var(--background-image); /* Replace with your image URL */
	    background-size: cover;
	    background-position: center;
	    filter: blur(10px); 					   /* Adjust the blur intensity */
	    z-index: -1; 							   /* Make sure the blur effect stays behind other content */
	  }
	.frame-content{
		width: 100vw;
		top: 20%;
		position: absolute;
	}
	.name{
		margin-top: 32rpx;
		font-weight: 400;	
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.text{
		margin-top: 206rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #C4C4C4;
	}
	.frame-buttom{
		position: fixed;
		top: 80%;
	}
	.img{
		
	}
	.frame-icon{
		width: 134rpx;
		height: 134rpx;
		// background: #000;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		// backdrop-filter: blur(10px) saturate(180%);
		// -webkit-backdrop-filter: blur(10px) saturate(180%);
	}
</style>
